<template>
  <div>
    <canvas
      class="mycanvas"
      :ref="'canvas' + id"
      :width="width"
      :height="height"
      tabindex="0"
    ></canvas>
  </div>
</template>

<script>
export default {
  name: "canvas",
  props: {},
  data() {
    return {
      id: 1,
      width: 500,
      height: 600,
    };
  },
  methods: {},
  mounted() {
    //获取canvas元素
    var canvas = this.$refs["canvas" + this.id];
    var ctx = canvas.getContext("2d"); //获取上下文(2d绘制)
    var x = 0;
    var y = 0; //设置小球的方向
    var speedX = 1;
    var speedY = 2; //给小球一个初始速度(如果给0的话会不动的，因为我试过，哈哈哈)。
    function Ball() {
      //(把小球放到一个函数里方便调用)
      ctx.beginPath();
      ctx.arc(100 + x, 100 + y, 50, 0, 2 * Math.PI, false); //小球的移动的距离随着 x , y 的增加而增加
      ctx.stroke();
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath();
    }
    Ball();
    setInterval(function () {
      undefined;
      ctx.clearRect(0, 0, canvas.width, canvas.height); //重绘清除画布

      x += speedX;
      y += speedY;
      //当小球移动的方向超过(Canvas的自身高度-小球的半径)或者小球移动的方向小于自身半径的时候，就会碰壁反弹。
      if (100 + x > canvas.width - 50) {
        undefined;
        speedX = -speedX;
      } else if (100 + x < 50) {
        undefined;
        speedX = -speedX;
      }
      if (100 + y > canvas.height - 50) {
        undefined;
        speedY = -speedY;
      } else if (100 + y < 50) {
        undefined;
        speedY = -speedY;
      }
      Ball();
    }, 10);

  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mycanvas {
  margin: 0 auto;
  background: #f1f1f1;
}
</style>